<template>
  <div class="Announcements flex column">
    <top-title :content="content" :updateTime="false" style="padding-left: 0"></top-title>
    <div class="info-context flex">
      <div class="common-box">
        <div class="icon-wrap">
          <img v-if="topRecord.informationIconUrl == ''" alt="" src="@/assets/imgs/icon.png" />
          <img v-else :src="`${imgPrefix + topRecord.informationIconUrl}`" alt="" />
        </div>
        <div class="content">
          <div class="top">
            {{ topRecord.companyName || '暂无' }}
            <span class="industry">{{ topRecord.informationName || '暂无' }}</span>
          </div>
          <div class="bot flex align-center">
            <img alt="" src="@/assets/imgs/location.png" />
            {{ topRecord.addressDetail || '暂无' }}
          </div>
        </div>
      </div>

      <!-- <div class="common-box">
        <div class="icon-wrap">
          <img v-if="topRecord.policeUserImage == ''" src="@/assets/imgs/icon1.png" alt="" />
          <img v-else :src="`${imgPrefix + topRecord.policeUserImage}`" alt="" />
        </div>
        <div class="content">
          <div class="top">
            {{ topRecord.policeUserName || '暂无' }}
            <span class="phone"> {{ topRecord.policeUserMobile || '暂无' }}</span>
          </div>
          <div class="bot flex align-center">
            {{ topRecord.policeAgencyName || '暂无' }}-{{ topRecord.jurisdictionName || '暂无' }}
          </div>
        </div>
      </div> -->

      <div class="common-box">
        <div class="icon-wrap">
          <img alt="" src="@/assets/imgs/icon3.png" />
        </div>
        <div class="content">
          <div class="top">检查总次数(次)</div>
          <div class="bot flex align-center">
            <span class="num"> {{ topRecord.checkCount }}</span>
          </div>
        </div>
      </div>

      <div class="common-box">
        <div class="icon-wrap">
          <img alt="" src="@/assets/imgs/icon4.png" />
        </div>
        <div class="content">
          <div class="top">检查合格次数(次)</div>
          <div class="bot flex align-center">
            <span class="num">{{ topRecord.checkQualifiedCount }}</span>
          </div>
        </div>
      </div>

      <div class="common-box">
        <div class="icon-wrap">
          <img alt="" src="@/assets/imgs/icon2.png" />
        </div>
        <div class="content">
          <div class="top">检查不合格次数(次)</div>
          <div class="bot flex align-center">
            <span class="num">{{ topRecord.checkFailedCount }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="table-wrap f1 column flex">
      <div class="search-group">
        <div class="input-wrap">
          <div class="label">检查时间:</div>
          <div class="time-item">
            <start-end-time
              :resetTime="resetTime"
              :showTime="{ format: 'HH:mm:ss' }"
              :times="times"
              format="YYYY-MM-DD HH:mm:ss"
              @timeChange="timeChange"
            ></start-end-time>
          </div>
        </div>

        <div class="input-wrap">
          <div class="label">检查结果:</div>
          <div class="input-item">
            <a-select ref="select" v-model="queryParam.checkResult" allowClear placeholder="请选择检查结果">
              <a-select-option v-for="(item, index) in check_task_result" :key="index" :value="item.value">
                {{ item.text }}
              </a-select-option>
            </a-select>
          </div>
        </div>

        <div class="btn-wrap">
          <a-button
            class="searchBtn"
            type="primary"
            @click="searchQuery(queryParam.checkTime_begin, queryParam.checkTime_end)"
          >
            搜索
          </a-button>
          <a-button class="resetBtn" type="primary" @click="searchReset()"> 重置 </a-button>
        </div>
      </div>

      <div class="f1 table-container">
        <a-table
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          class="tableList"
          rowKey="id"
          @change="handleTableChange"
        >
          <template slot="title" slot-scope="records">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{ records.title }} </span>
              </template>
              <span>{{ records.title }} </span>
            </a-tooltip>
          </template>
          <template slot="action" slot-scope="records">
            <span class="operation deatil-color" @click="detailHandle(records)">详情</span>
          </template>
        </a-table>
      </div>
    </div>

    <detail-modal ref="detailModal" @refresh="searchQuery"></detail-modal>
  </div>
</template>

<script>
import detailModal from './modules/detailModal'
import topTitle from '@/components/topTitle'
import startEndTime from '@/components/startEndTime'
import { comMethods } from '@/mixins/comMethods'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { checkRecordTop } from '@/api/company'
import { ajaxGetDictItems } from '@/api/api'
export default {
  name: 'Announcements',
  components: { topTitle, startEndTime, detailModal },
  mixins: [JeecgListMixin, comMethods],
  data() {
    return {
      content: [['企业检查记录'], ['检查记录']],
      url: {
        list: '/police/check_task/page?checkStatus=3&checkType=1',
      },
      imgPrefix: '',
      disableMixinCreated: true,
      publicVisible: false,
      topRecord: {},
      check_task_result: [],
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '检查时间',
          dataIndex: 'checkTime',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '检查类型',
          dataIndex: 'industryExamineName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '检查民警',
          dataIndex: 'policeUserName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '检查结果',
          dataIndex: 'checkResult_dictText',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          ellipsis: true,
          align: 'center',
        },
      ],
    }
  },
  // TODO 新增头像显示
  mounted() {
    this.url.list = this.url.list + `&policeAgencyId=${this.$store.state.user.isPoliceAgencyId.id}`
    if (this.$route.query.params && this.$route.query.params.constructor === Object) {
      let params = this.$route.query.params
      localStorage.setItem('searchParams', JSON.stringify(params)) // 持久化储存 刷新使用
      this.queryParam = {
        ...params,
      }
      this.searchQuery()
    } else {
      this.queryParam = {
        ...JSON.parse(localStorage.getItem('searchParams')),
      }
      this.searchQuery()
    }
    this.getCheckRecordTop()
    this.getSelectValue()
  },
  methods: {
    async getCheckRecordTop() {
      let { result } = await checkRecordTop({ id: this.queryParam.companyMessageId })
      this.topRecord = result
    },

    async getSelectValue() {
      let { result } = await ajaxGetDictItems({ code: 'check_task_result' })
      this.check_task_result = result
    },

    searchReset() {
      if (this.queryParam.companyMessageId) {
        let id = this.queryParam.companyMessageId
        this.queryParam = {}
        this.queryParam.companyMessageId = id
      } else {
        this.queryParam = {}
      }
      this.resetTime = true
      this.loadData(1)
    },
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.checkTime_begin = this.$moment(v).valueOf()
      } else {
        this.queryParam.checkTime_end = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.checkTime_begin = null
        this.queryParam.checkTime_end = null
      }
    },

    detailHandle(records) {
      this.$refs.detailModal.show(records)
    },
  },
}
</script>

<style lang="less" scoped>
.Announcements {
  width: 100%;
  height: 100%;
  padding: 0 0.2rem;
  background: var(--theme-content-bg);

  overflow: hidden;
  font-family: PingFang SC-Medium, PingFang SC;

  .info-context {
    height: 1.2rem;
    background: var(--theme-container-bg);
    margin-bottom: 0.2rem;
    padding: 0.18rem 0;

    .common-box {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 2px solid var(--theme-input-border);

      &:last-child {
        border: none;
      }

      .icon-wrap {
        flex: 1;
        display: flex;
        align-items: center;
        height: 100%;
        margin-right: 0.1rem;
        padding-left: 0.16rem;
        img {
          width: 0.64rem;
          height: 0.64rem;
          border-radius: 50%;
        }
      }
      .content {
        flex: 4;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100%;
        font-size: 0.16rem;
        font-weight: 500;
        color: var(--theme-modal-label-value-color);
        .top {
          font-size: 0.14rem;
          .phone {
            color: #509eee;
          }
          .industry {
            background: #80b5eb;
            padding: 0 5px;
            border-radius: 4px;
            color: #115398;
          }
        }
        .bot {
          color: #509eee;
          font-size: 0.14rem;
          img {
            width: 0.1rem;
            height: 0.12rem;
            margin-right: 0.1rem;
          }
          .num {
            font-size: 0.24rem;
            font-weight: 700;
            font-family: DIN-Medium, DIN;
            color: var(--theme-modal-label-value-color);
          }
        }
      }
    }
  }

  .table-wrap {
    background: var(--theme-container-bg);

    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
}
</style>
